<!--  -->
<template>
  <div>
    <!-- 走马灯 -->
    <el-carousel
      :interval="5000"
      arrow="always"
      @change="banner"
      style="cursor: pointer"
    >
      <el-carousel-item
        v-for="item in articleRecommend"
        :key="item"
        @click="showArticle(item)"
      >
        <h3 text="2xl" justify="center">
          <img
            style="width: 50%; height: 50%; object-fit: cover"
            :src="item.cover"
            alt=""
          />
        </h3>
      </el-carousel-item>
    </el-carousel>
  </div>

  <div class="top">
    <el-row style="margin-top: 20px;">
      <el-col :span="8">
        <el-descriptions title="热门搜索Top5">
          <el-descriptions-item label="">
            <el-tag size="large">School</el-tag>&nbsp;
            <el-tag size="large">apkas</el-tag>&nbsp;
            <el-tag size="large">bs</el-tag>&nbsp;
            <el-tag size="large">eb</el-tag>&nbsp;
            <el-tag size="large">ubs</el-tag>&nbsp;
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="6">
        <div class="demo-input-size">
          <el-input
            v-model="keyword"
            class="w-50 m-2"
            placeholder="请输入搜索内容"

            style="background-color: darkgray;"
          >
          <template #append>
            <el-button icon="Search" @click="handleClick" />
          </template>
        </el-input></div
      ></el-col>
    </el-row>

    <el-descriptions title="">
      <el-descriptions-item label="相关推荐">
        <el-tabs
          v-model="activeName"
          type="card"
          class="demo-tabs"
          @tab-click="handleClick"
          
        >
          <el-tab-pane v-for="(item, index) in tabpanes" :key="index" :label="item.label" :name="item.name"
            ><HomeExhibition @showArticle="showArticle" @getArticle="getArticle" @toCommunity="toCommunity" :data="dataForTime" :dataNum="dataNum" v-if="activeName===item.name"></HomeExhibition
          ></el-tab-pane>
        </el-tabs>
      </el-descriptions-item>
    </el-descriptions>
  </div>

  
</template>

<script>
import HomeExhibition from "../components/HomeExhibition.vue";
import axios, { Axios } from "axios";

export default {
  name: "Home",
  components: { HomeExhibition },
  props: {},
  data() {
    return {
      activeName: "first",
      dataForTime: [], //传给子组件的数据
      dataNum:5,         //当前搜索的总数据量
      keyword:'',
      articleRecommend:[  //轮播图
        {id:1,title:'文章1',author:'作者1',time:'2022-01-01',read:'100',score:'9.9'},
        {id:15,title:'文章1',author:'作者1',time:'2022-01-01',read:'100',score:'9.9'},
        {id:17,title:'文章1',author:'作者1',time:'2022-01-01',read:'100',score:'9.9'},
      ],
      start:0,  //当前文章位置
      end:5,    //下一次获取文章个数
      tabpanes:[    //“相关推荐”下的选项
        {label:'最新发布',name:'first'},
        {label:'最多评论',name:'second'},
        {label:'最多阅读',name:'third'},
        {label:'内容评分',name:'fourth'},
        {label:'我的关注',name:'fifth'},
      ]
    };
  },
  computed: {},
  watch: {},
  methods: {
    toCommunity(tag){
      this.$emit('toCommunity',tag)
    },
    banner(item) {
      // console.log(item, "1111");
    },
    handleClick(t,e){   //点击后触发的加载事件
      // this.activeName = t.props.name  //获取点击项的名称
      // console.log(this.activeName);
      // 更新数据状态
      this.start=0
      this.end=5
      this.dataForTime=[]
      this.GetDataNum()
      this.getArticle(this.start,this.end)  
    },
    showArticle(item){ //点击文章跳转详细页面
      // console.log(item);
      this.$store.state.cacheArticle=JSON.stringify(item)
      this.$router.push({path:'/article',query:{id:item.a_id}})
    },
    getArticle(start,end){    //更新文章总数
      this.start = start
      this.end = end
      this.GetData()
      console.log(this.dataForTime);
    },
    GetData(){    //获取 不同推荐选项点击后 的文章
      axios.get("http://localhost:8888/article/articleRange",{
        params:{
          start:this.start,
          end:this.end,
          activeName:this.activeName,
          keyword:this.keyword,
          u_id:this.$store.state.user.u_id
        }
      }).then(data=>{
        console.log(data.data.data);
        if(data.data.data != null){
          this.dataForTime.push(...data.data.data)
          console.log(this.dataForTime);
        }else{
          this.dataForTime = this.dataForTime
        }
      })
    },
    GetDataNum(){   //获取"相关推荐"下当前查看推荐的文章总数
      axios.get("http://localhost:8888/article/articleRangeNum",{
        params:{
          activeName:this.activeName,
          keyword:this.keyword,
          u_id:this.$store.state.user.u_id
        }
      }).then(data=>{
        this.dataNum =data.data.data;
        // console.log(this.dataNum);
      })
    },
    GetCommend(){   //获取推荐文章,用来制作轮播图
      axios.get("http://localhost:8888/article/articleForCommend").then(data=>{
        this.articleRecommend = data.data.data;
        // console.log(this.articleRecommend);
      })
    }
  },
  created() {   //获取初始数据
    this.$store.state.lastActiveComponent = "home"
    if(JSON.stringify(this.$store.state.user)  == '{}') this.$router.push('/login')
    this.GetCommend()
    this.GetDataNum()
    this.GetData()
    
  },
  mounted() {
  },
};
</script>

<style scoped>
.top {
  margin: 10px 0px 0px 0px;
  width: 80%;
  margin: 0px auto;
}

/*  */
.demo-input-size{
  display: inline-block;
  line-height: 82px;
  vertical-align: bottom;
  margin-top: 11px;
}
</style>
